import {MESSAGE} from "./util/alert.js";
import {AJAX} from "./util/ajax.js";
import {URL} from "./router/config.js";
import {removeAllChild, randomColor, classContainColor} from "./util/utils.js";

let defaultOutConfig = {
    setCatchMenu: function (MenuCache = true) {
        cacheMenu.catchAble = MenuCache;
    }
}
let cacheMenu = {cacheAble: true, lastActive: null, nextActive: null};
(function () {

    InitPage();

    function InitPage() {
        InitCss();
        InitMainMenu();
        InitRandomColorFont();
    }

    function InitRandomColorFont() {
        let fonts = document.querySelectorAll(".random-color");
        fonts.forEach(o => o.style.color = randomColor());
    }

    function InitCss() {
        let classes = document.querySelectorAll(".btn-out");

        classes.forEach(cls => {
            cls.style.border = "1px solid " + classContainColor(cls.className);
            cls.addEventListener("onmouseover", function () {
                cls.style.backgroundColor = classContainColor(cls.className);
                cls.style.color = "#fff9f9";
            });
            cls.addEventListener("onmouseout", function () {
                cls.style.backgroundColor = "unset";
                cls.style.color = "#2b303b";
            });
            return cls;
        });

    }

    function InitMainMenu() {
        let mainMenu = document.getElementById("main-menu");

        AJAX.get({
            url: URL.HOST_URL() + URL.INDEX_MENU_URL,
            success: function (data) {
                let menuItems = JSON.parse(data);
                if (menuItems instanceof Array && menuItems.length > 0) {
                    let localCatchMenu = localStorage.getItem("default_catch_menu");
                    if (localCatchMenu) {
                        cacheMenu = JSON.parse(localCatchMenu);
                    }
                    removeAllChild(mainMenu);
                    menuItems.sort(function (o1, o2) {
                        return o1.sort < o2.sort ? -1 : o1.sort === o2.sort ? 0 : 1;
                    });
                    for (const menuItem of menuItems) {
                        let li = document.createElement("li");
                        if (menuItem.active) {
                            li.className += "active";
                            cacheMenu.lastActive = menuItem.text;
                        }
                        li.setAttribute("menu-url", menuItem.url);
                        li.innerText = menuItem.text;
                        if (cacheMenu && cacheMenu.cacheAble) {
                            if (cacheMenu.lastActive && cacheMenu.nextActive) {
                                if (li.innerText === cacheMenu.lastActive) {
                                    li.className = li.className.replace("active", "");
                                }
                                if (li.innerText === cacheMenu.nextActive) {
                                    li.className += "active";
                                }
                            }
                        }

                        li.addEventListener("click",function () {
                            cacheMenu.nextActive = li.innerText;
                            localStorage.setItem("default_catch_menu", JSON.stringify(cacheMenu));
                            window.location.href = URL.HOST_URL() + menuItem.url;
                        })
                        mainMenu.appendChild(li);
                    }
                }

            },
            error: function (error) {
                MESSAGE.error({content: error});
            }

        });
    }

})(window);

export let defaultConfig = {
    cacheMenu: defaultOutConfig.setCatchMenu,

};
